import { useState, useEffect } from 'react'
import { Row, Col } from 'antd'
import Card from '@/components/main-content/cards/item-card'

const Cards = () => {
  const xsSize = 24
  const smSize = 8
  const mdSize = 8
  const lgSize = 6

  const [list, setList] = useState([])

  useEffect(() => {
    const temp = []
    for (let i = 0; i < 15; i++) {
      temp.push(
        <Col xs={xsSize} sm={smSize} md={mdSize} lg={lgSize} key={i}>
          <Card />
        </Col>
      )
    }
    setList(temp)
  }, [])

  return (
    <>
      <Row gutter={[16, 16]} style={{ marginTop: 40 }}>
        {list}
      </Row>
    </>
  )
}

export default Cards
